﻿<%@page import="com.cchr.acms.util.HtmlComponentUtil.SelectOption"%>
<%@page import="java.util.List"%>
<%@page import="com.cchr.acms.util.HtmlComponentUtil"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"   pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%
	String contextPath = request.getContextPath();
%>
<!DOCTYPE html>
<!--

TABLE OF CONTENTS.

Use search to find needed section.

=====================================================

|  1. $BODY                 |  Body                 |
|  2. $MAIN_NAVIGATION      |  Main navigation      |
|  3. $NAVBAR_ICON_BUTTONS  |  Navbar Icon Buttons  |
|  4. $MAIN_MENU            |  Main menu            |
|  5. $DEFAULT_TABLES       |  Default tables       |
|  6. $BORDERED_TABLES      |  Bordered tables      |
|  7. $HOVER_ROW_TABLES     |  Hover row tables     |
|  8. $STRIPED_TABLES       |  Striped tables       |
|  9. $CONDENSED_TABLES     |  Condensed tables     |
|  10. $TABLE_VARIATIONS    |  Table variations     |
|  11. $JQUERY_DATA_TABLES  |  jQuery Data Tables   |

=====================================================

-->


<!--[if IE 8]>         <html class="ie8"> <![endif]-->
<!--[if IE 9]>         <html class="ie9 gt-ie8"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="gt-ie8 gt-ie9 not-ie"> <!--<![endif]-->
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Case List</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

	<!-- Open Sans font from Google CDN -->
	<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,600,700,300&subset=latin" rel="stylesheet" type="text/css">

	<!-- Pixel Admin's stylesheets -->
	<link href="<%=contextPath%>/assets/stylesheets/bootstrap.min.css" rel="stylesheet" type="text/css">
	<link href="<%=contextPath%>/assets/stylesheets/pixel-admin.min.css" rel="stylesheet" type="text/css">
	<link href="<%=contextPath%>/assets/stylesheets/widgets.min.css" rel="stylesheet" type="text/css">
	<link href="<%=contextPath%>/assets/stylesheets/rtl.min.css" rel="stylesheet" type="text/css">
	<link href="<%=contextPath%>/assets/stylesheets/themes.min.css" rel="stylesheet" type="text/css">
	
	<style>
		.table-header{
			display:none;
		}
		td .New{
			color:red
		}
		td .inprocess{
			color:#C9B313
		}
		td .complete{
			color:green
		}
	</style>

	<!--[if lt IE 9]>
		<script src="assets/javascripts/ie.min.js"></script>
	<![endif]-->

</head>

<body class="theme-default main-menu-animated">
<script>var init = [];</script>

<div id="main-wrapper">


<!-- 2. $MAIN_NAVIGATION ===========================================================================

	Main navigation
-->
	<div id="main-navbar" class="navbar navbar-inverse" role="navigation">
		<!-- Main menu toggle -->
		<button type="button" id="main-menu-toggle"><i class="navbar-icon fa fa-bars icon"></i><span class="hide-menu-text">HIDE MENU</span></button>
		
		<div class="navbar-inner">
			<!-- Main navbar header -->
			<div class="navbar-header">

				<!-- Logo -->
				<a href="<%=contextPath%>/case/showAbuseList" class="navbar-brand">
					<div><img alt="Pixel Admin" src="<%=contextPath%>/assets/images/pixel-admin/main-navbar-logo.png"></div>
					ACMS System
				</a>

				<!-- Main navbar toggle -->
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar-collapse"><i class="navbar-icon fa fa-bars"></i></button>

			</div> <!-- / .navbar-header -->

			<div id="main-navbar-collapse" class="collapse navbar-collapse main-navbar-collapse">
				<div>
					<ul class="nav navbar-nav">
						<li>
							<a href="<%=contextPath%>/case/showAbuseList">Home</a>
						</li>
					</ul> <!-- / .navbar-nav -->

					<div class="right clearfix">
						<ul class="nav navbar-nav pull-right right-navbar-nav">

<!-- 3. $NAVBAR_ICON_BUTTONS =======================================================================

							Navbar Icon Buttons

							NOTE: .nav-icon-btn triggers a dropdown menu on desktop screens only. On small screens .nav-icon-btn acts like a hyperlink.

							Classes:
							* 'nav-icon-btn-info'
							* 'nav-icon-btn-success'
							* 'nav-icon-btn-warning'
							* 'nav-icon-btn-danger' 
-->
							
<!-- /3. $END_NAVBAR_ICON_BUTTONS -->


							<li class="dropdown">
								<a href="#" class="dropdown-toggle user-menu" data-toggle="dropdown">
									<span>John Doe</span>
								</a>
								<ul class="dropdown-menu">
									<li><a href="#"><span class="label label-warning pull-right">New</span>Profile</a></li>
									<li><a href="abuse--resetpsd-alt.html"><i class="dropdown-icon fa fa-cog"></i>&nbsp;&nbsp;Reset Password</a></li>
									<li class="divider"></li>
									<li><a href="login.html"><i class="dropdown-icon fa fa-power-off"></i>&nbsp;&nbsp;Log Out</a></li>
								</ul>
							</li>
						</ul> <!-- / .navbar-nav -->
					</div> <!-- / .right -->
				</div>
			</div> <!-- / #main-navbar-collapse -->
		</div> <!-- / .navbar-inner -->
	</div> <!-- / #main-navbar -->
<!-- /2. $END_MAIN_NAVIGATION -->


<!-- 4. $MAIN_MENU =================================================================================

		Main menu
		
		Notes:
		* to make the menu item active, add a class 'active' to the <li>
		  example: <li class="active">...</li>
		* multilevel submenu example:
			<li class="mm-dropdown">
			  <a href="#"><span class="mm-text">Submenu item text 1</span></a>
			  <ul>
				<li>...</li>
				<li class="mm-dropdown">
				  <a href="#"><span class="mm-text">Submenu item text 2</span></a>
				  <ul>
					<li>...</li>
					...
				  </ul>
				</li>
				...
			  </ul>
			</li>
-->
	<div id="main-menu" role="navigation">
		<div id="main-menu-inner">
			<div class="menu-content top" id="menu-content-demo">
				<!-- Menu custom content demo
					 CSS:        styles/pixel-admin-less/demo.less or styles/pixel-admin-scss/_demo.scss
					 Javascript: html/assets/demo/demo.js
				 -->
				<div>
					<div class="text-bg"><span class="text-slim">Welcome,</span> <span class="text-semibold">John</span></div>

					<img src="<%=contextPath%>/assets/demo/avatars/1.jpg" alt="" class="">
					<a href="#" class="close">&times;</a>
				</div>
			</div>
			<ul class="navigation">
				<!-- 
				<li>
					<a href="<%=contextPath%>/case/create" target="_blank"><i class="menu-icon fa fa-dashboard"></i><span class="mm-text">Create New Case</span></a>
				</li>
				<li>
					<a href="user-list.html"><i class="menu-icon fa fa-dashboard"></i><span class="mm-text">User Management</span></a>
				</li>
				 -->
				<li class="active">
					<a href="<%=contextPath%>/case/showAbuseList"><i class="menu-icon fa fa-dashboard"></i><span class="mm-text">Case Management</span></a>
				</li>
			</ul> <!-- / .navigation -->
		</div> <!-- / #main-menu-inner -->
	</div> <!-- / #main-menu -->
<!-- /4. $MAIN_MENU -->

	<div id="content-wrapper">
		<ul class="breadcrumb breadcrumb-page">
			<div class="breadcrumb-label text-light-gray">You are here: </div>
			<li><a href="#">Home</a></li>
			<li class="active"><a href="<%=contextPath%>/donate">ABUSE CASE LIST</a></li>
		</ul>

	<!--show list-->
	<div class="row">
			<div class="col-sm-12">
				<div class="panel">
					 <!--search conditions-->
					<div class="row">
						<div class="col-sm-12">
						<form class="form-horizontal " role="form" id="abuseList" >
							<div class="panel-body" style="padding:20px">
							<div class="row">
								<div class="col-sm-4">
									<div class="form-group">
										<label  class="col-sm-5 control-label">Patient Name:</label>
										<div class="col-sm-7">
											<input type="text" class="form-control" name="queryEntity.patientName" id="queryEntityPatientName">
										</div> 
									</div>
								</div>						
								<div class="col-sm-4">
									<div class="form-group">
										<label  class="col-sm-5 control-label">Doctor Name:</label>
										<div class="col-sm-7">
											<input type="text" class="form-control" name="queryEntity.doctorName" id="queryEntityDoctorName">
										</div> 
									</div>
								</div>					
								<div class="col-sm-4">
									<div class="form-group">
										<label  class="col-sm-5 control-label">Facility Name:</label>
										<div class="col-sm-7">
											<input type="text" class="form-control" name="queryEntity.facilityName" id="queryEntityFacilityName">
										</div> 
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-sm-4">
									<div class="form-group">
										<label  class="col-sm-5 control-label">Drug Name:</label>
										<div class="col-sm-7">
											<input type="text" class="form-control" name="queryEntity.DrugName" id="queryEntityDrugName">
										</div> 
									</div>
								</div>
								<div class="col-sm-1 ">
									<a class="btn btn-primary" id="searchBtn">Search</a>
								</div>
								<div class="col-sm-4">
									<div class="checkbox">
										<label>
											<input type="checkbox" id="advancedcheckbox" name="advancedcheckbox" class="px"> 
											<span class="lbl">Advanced search</span>
										</label>
									</div>
								</div>
							</div>
							<div id="advanceArea" style="display:none;margin-top:30px">	
								<div class="row">	
										<div class="col-sm-4">
											<div class="form-group">
												<label  class="col-sm-5 control-label">Age of Abused:</label>
												<div class="col-sm-7">
													<input type="text" class="form-control" name="queryEntity.abusedAge" id="queryEntityAbusedAge">
												</div> 
											</div>
										</div>
										<div class="col-sm-4">
											<div class="form-group">
												<label  class="col-sm-5 control-label">Date Range of Abuse:</label>
												<div class="col-sm-7 input-daterange input-group" id="bs-datepicker-range">
													<input type="text" class="input-sm form-control" name="queryEntity.abuseStart" id="queryEntityAbuseStart" placeholder="Start date">
													<span class="input-group-addon">to</span>
													<input type="text" class="input-sm form-control" name="queryEntity.abuseEnd" id="queryEntityAbuseEnd" placeholder="End date">
												</div>
											</div>
										</div>	
										<div class="col-sm-4">
											<div class="form-group">
												<label  class="col-sm-5 control-label">Drug Type:</label>
													<div class="col-sm-7">
														<input type="text" class="form-control" name="queryEntity.drugType" id="queryEntityDrugType">
													</div> 
											</div> 
										</div>
								</div>
									<div class="row">	
										<div class="col-sm-4">
											<div class="form-group">
												<label  class="col-sm-5 control-label">city:</label>
												<div class="col-sm-7">
													<input type="text" class="form-control" name="queryEntity.abusedcity" id="queryEntityAbusedcity">
												</div> 
											</div>
										</div>
										<div class="col-sm-4">
											<div class="form-group">
												<label  class="col-sm-5 control-label">State/Province:</label>
												<div class="col-sm-7">
													<input type="text" class="form-control" name="queryEntity.abusedstate" id="queryEntityAbusedstate">
												</div> 
											</div>
										</div>
										<div class="col-sm-4">
											<div class="form-group">
												<label  class="col-sm-5 control-label">country:</label>
												<div class="col-sm-7">
													<%= HtmlComponentUtil.getSelect("queryEntityAbusedcountry", "queryEntity.abusedcountry", (List<SelectOption>)request.getAttribute("countryDatas"), null, "Select an option...") %>
												</div> 
											</div>
										</div>	

									</div>
									<div class="row">
										<div class="col-sm-4">
											<div class="form-group">
												<label  class="col-sm-5 control-label">Type of Abuse:</label>
												<div class="col-sm-7">
													<%= HtmlComponentUtil.getSelect("queryEntityAbuseType", "queryEntity.abuseType", (List<SelectOption>)request.getAttribute("abuseTypes"), null, "Select an option...") %>
												</div> 
											</div>
										</div>
										<div class="col-sm-4">
											<div class="form-group ">
												<label  class="col-sm-5 control-label">Type of Facility:</label>
												<div class="col-sm-7">
													<%= HtmlComponentUtil.getSelect("queryEntityFacilityType", "queryEntity.facilityType", (List<SelectOption>)request.getAttribute("facilityTypes"), null, "Select an option") %>
												</div> 
											</div>
										</div>
										<div class="col-sm-4">
											<div class="form-group">
												<label  class="col-sm-5 control-label">Type of Doctor:</label>
												<div class="col-sm-7">
													<%= HtmlComponentUtil.getSelect("queryEntityDoctorType", "queryEntity.doctorType", (List<SelectOption>)request.getAttribute("docTypes"), null, "Select an option...") %>
												</div> 
											</div>
										</div>
									</div>
									<div class="row">
										<div class="col-sm-4">
											<div class="form-group">
												<label  class="col-sm-5 control-label">Facility Location City:</label>
												<div class="col-sm-7">
													<input type="text" class="form-control" name="queryEntity.facilityCity" id="queryEntityFacilityCity">
												</div> 
											</div>
										</div>	
										<div class="col-sm-4">
											<div class="form-group">
												<label  class="col-sm-5 control-label">Facility Location State:</label>
												<div class="col-sm-7">
													<input type="text" class="form-control" name="queryEntity.facilityState" id="queryEntityFacilityState">
												</div> 
											</div>
										</div>
										<div class="col-sm-4">
											<div class="form-group">
												<label  class="col-sm-5 control-label">Facility Location County:</label>
												<div class="col-sm-7">
													<%= HtmlComponentUtil.getSelect("queryEntityFacilityCountry", "queryEntity.facilityCountry", (List<SelectOption>)request.getAttribute("countryDatas"), null, "Select an option...") %>
												</div> 
											</div>
										</div>
									</div>
									<div class="row">
										<div class="col-sm-4">
											<div class="form-group">
												<label  class="col-sm-5 control-label">with an Attorney:</label>
												<div class="col-sm-7">
													<select class="unRender" name="queryEntity.hasAttoney" id="queryEntityHasAttoney">
														<option value="Yes">Yes</option>
														<option value="No">No</option>
													</select>
												</div> 
											</div>
										</div>
										<div class="col-sm-4">
											<div class="form-group">
												<label  class="col-sm-5 control-label">Type of Insurance Used:</label>
												<div class="col-sm-7">
													<select class="form-control" name="queryEntity.insuranceType" id="queryEntityInsuranceType">
														<option>select drugs</option>
														<option value="AF">aspirin</option>
														<option value="AX">aspirin</option>
														<option value="AL">aspirin</option>
													</select>
												</div> 
											</div>
										</div>										
									</div>
									
								</div>
							</div>

							</div>
						</form>
						</div>

					</div>
					<div class="row">
						<div class="col-sm-12">
							<div class="panel-body">
								<div class="table-primary">
									<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="jq-datatables-example">
										<thead>
											<tr>
												<th>Case NO. </th>
												<th>Patient Name</th>
												<th>Doctor Name</th>
												<th>Facility Name</th>
												<th>City</th>
												<th>Processed By</th>
												<th>Last Update Date</th>
												<th>Last Updated By</th>
												<th>Case Status</th>
												<th>Operation</th>
											</tr>
										</thead>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div><!-- / #panel -->
		</div><!-- / #row -->
	</div> <!-- / #content-wrapper -->
  <div id="main-menu-bg"></div>
</div> <!-- / #main-wrapper -->

<!-- Get jQuery from Google CDN -->
<!--[if !IE]> -->
	<script type="text/javascript"> window.jQuery || document.write('<script src="<%=contextPath%>/assets/javascripts/jquery-2.0.3.min.js">'+"<"+"/script>"); </script>
<!-- <![endif]-->
<!--[if lte IE 9]>
	<script type="text/javascript"> window.jQuery || document.write('<script src="<%=contextPath%>/assets/javascripts/jquery-1.8.3.min.js">'+"<"+"/script>"); </script>
<![endif]-->


<script src="<%=contextPath%>/assets/javascripts/bootstrap.min.js"></script>
<script src="<%=contextPath%>/assets/javascripts/pixel-admin.min.js"></script>
<script>var init = [];</script>
<script>
	$(function(){
		var operationButtonInit = function(data, type, full) {
			var comp = '<td><div class="btn-group btn-group-sm">' + 
							'<a target="_blank" class="btn btn-primary" type="button" href=\'<%=contextPath%>/case/detail/'+ full.id +'\'>View Detail</a>' +
							'<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle" type="button"><i class="fa fa-caret-down"></i></button>' +
							'<ul class="dropdown-menu">' +
								'<li><a target="_blank" type="button" href="#">Recall Case</a></li>' +
								'<li><a target="_blank" type="button" href="#">Set Status</a></li>' +
								'<li><a target="_blank" type="button" href="#">Assgin Case</a></li>' +
							'</ul>' +
						'</div></td>';
			return comp;
		};
		
		var statusInit = function(data, type, full) {
			var comp = '<div class="' + full.status + '">' + full.status
						'</div>';
			return comp;
		};
		
		window.dataTable = $('#jq-datatables-example').dataTable( {
			'sPaginationType' : 'full_numbers',
			'bProcessing' : true,
			'bServerSide' : true,
			'bDeferRender' : true,
			"sServerMethod" : "POST",
			"bLengthChange": false, //改变每页显示数据数量
			"bSort": false, //排序功能
			"bFilter": false,
			"iDisplayLength" : 20, 
			"ajax": {
			    "url": '<%=contextPath%>/case/showAbuseListJson',
			    "data": function ( d ) {
			        d.patientName = $('#queryEntityPatientName').val();
			        d.doctorName = $('#queryEntityDoctorName').val();
			        d.facilityName = $('#queryEntityFacilityName').val();
			        d.drugName = $('#queryEntityDrugName').val();
			        d.abuseStart = $('#queryEntityAbuseStart').val();
			        d.abuseEnd = $('#queryEntityAbuseEnd').val();
			        d.abusedAge = $('#queryEntityAbusedAge').val();
			        d.drugType = $('#queryEntityDrugType').val();
			        d.abusedcity = $('#queryEntityAbusedcity').val();
			        d.abusedstate = $('#queryEntityAbusedstate').val();
			        d.abusedcountry = $('#queryEntityAbusedcountry').val();
			        d.abuseType = $('#queryEntityAbuseType').val();
			        d.facilityType = $('#queryEntityFacilityType').val();
			        d.doctorType = $('#queryEntityDoctorType').val();
			        d.facilityCity = $('#queryEntityFacilityCity').val();
			        d.facilityState = $('#queryEntityFacilityState').val();
			        d.facilityCountry = $('#queryEntityFacilityCountry').val();
			        d.hasAttoney = $('#queryEntityHasAttoney').val();
			        d.insuranceType = $('#queryEntityInsuranceType').val();
				}
			},
			'aoColumnDefs' : [
			                  {aTargets : [ '_all' ], sDefaultContent : '&nbsp;'},
			                  {aTargets : [ 0 ], mData : 'sequence'},
			                  {aTargets : [ 1 ], mData : 'patientName'},
			                  {aTargets : [ 2 ], mData : 'doctorName'},
			                  {aTargets : [ 3 ], mData : 'facilityName'},
			                  {aTargets : [ 4 ], mData : 'city'},
			                  {aTargets : [ 5 ], mData : 'processedBy'},
			                  {aTargets : [ 6 ], mData : 'lastUpdateDate'},
			                  {aTargets : [ 7 ], mData : 'lastUpdatedBy'},
			                  {aTargets : [ 8 ], mRender : statusInit},
			                  {aTargets : [ 9 ], mRender : operationButtonInit,'bSortable' : false},
			                  ]

		} ); 
      
      $('#searchBtn').click(function(){
			var settings = window.dataTable.fnSettings();
			settings._iDisplayStart = 0;
			window.dataTable.fnDraw();
      });
	});
	
	init.push(function () {		
		var options2 = {
			orientation: $('body').hasClass('right-to-left') ? "auto right" : 'auto auto'
		}
		$('#bs-datepicker-range').datepicker(options2);
		
		$("#advancedcheckbox").click(function(){  
			if($(this).prop("checked")){
				$("#advanceArea").show();
			}else{
				$("#advanceArea").hide();
			}
	      });  
		
		$("select:not(.unRender)").select2({
		    allowClear: true
		});
			
	});
	window.PixelAdmin.start(init);
</script>
</body>
</html>
